<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>{$info.title}</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>

    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/mycord/css/paycards.css?{:rand(1,99999)}" />
    <style>
        body {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            font-family: "Microsoft Yahei";
            font-size: 1.2rem;
            color: #a1a1a1;
            background: #fff;
            position: relative;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .style-six .get-btn, .style-seven .get-btn{
            color:#0d0d0d;
            width: 33%;
            font-size: 12px;
        }
        html, body {
            height: 100%;
            margin: 0;
        }
        a{
            color: #aaa;
        }
        a:hover{
            color: #aaa;
        }

        .footer,.push {
            height: 250px;
        }
        .nick{
            margin-top: -7px;
            font-size: 14px;
        }
        .coupon-item .coupon-money{
            margin-top: 5px;
        }
        .of{
            font-size: 18px;
            font-weight: 500;
        }
        .coupon-item .coupon-money .lay:last-child{
            margin-top: 6px;
        }
      .btn{
          padding: 0 20px;
          margin-bottom: 20px;
      }
    </style>
    <style>
        .cardLi {
            position: relative;
            height: auto;
        }
         .activityTitle {
            position: absolute;
            top: 29px;
            color: #fff;
            font-size: 14px;
            width: 162px;
            white-space: nowrap;
            left: 130px;
            display: inline-block;
            overflow: hidden;
        }
         .commodityImgBox {
            width: 100%;
             height: 29%;
        }
         .commodityImg,.img {
             padding: 5px;
             width: 100%;
             height: auto;
            display: inline-block;
            background-size: 100%;
        }
         .commodityIntroBox {
            line-height: 20px;
            min-height: 20px;
            text-align: center;
            padding-left: 20px;
            padding-right: 20px;
             padding-top: 20px;
             font-size:15px;
        }
        .c-aligh-left {
            text-align: left;
        }

        .c-inlineblock {
            display: inline-block;
        }

        .color1 {
            color: #999;
        }
         .commodityUnivalenceBox {
            overflow: hidden;
            text-align: center;
            height: 20px;
            line-height: 20px;
        }

        .color6 {
            color: #000;
        }

        .mtop5 {
            margin-top: 5px;
        }
        .fsize10 {
            font-size: 15px;
        }
         .commodityUnivalenceBox .commodityUnivalence {
            font-size:22px;
            font-weight: bold;
            white-space: nowrap;
        }
        .pad20 {
            padding: 20px;
        }
        .c-line {
            height: 0px;
            border-top: 1px solid #E7E7EB;
        }
         .commodityDescBox {
             background-color: #f7f7f7;
             min-height: 112px;
             border-radius: 6px;
             margin: 0 20px;
             padding: 9px;
             overflow: hidden;
             font-size: 14px;
             color: #505050;

         }

       .commodityDescBox > .jus { display: inline-block /* Opera */; padding-left: 100%; }
        .c-aligh-left {
            text-align: left;
        }
         .paycommodityUnivalenceBox {
            border-radius: 6px;
            background-color: #37B835;
            height: 42px;
            line-height: 42px;
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 20px;
        }

        .mtop45 {
            margin-top: 45px;
        }
        .color7 {
            color: #fff;
        }

        .fsize14 {
            font-size: 14px;
        }
        .card-left {

            background-color: #ffffff;

        }
        #commodityIntro,.commodityIntro{
            padding-left: 10px;
            width: 328px;
            height: 88px;
            border: 1px solid #DCDDDD;
            vertical-align: text-top;
            resize: none;
        }
        .gift-record select, .gift-record input {
            display: inline-block;
            width: 40%;
            float: left;
        }
        .gift-record input {
            margin-left: 5px;
        }
        .addcord {
            padding: 0;
            margin-top: 5px;
        }
         .content > div.commodityImgBox{
             position:relative;

         }
         .ck{
              display:inline-block;

          }
         .ck a{
             color:#0C0C0C;
             text-decoration:underline;
         }
         .commodityImgBox .commodityImg {
             height: 14em;

         }
         .commodityImgBox .mask{
             padding:55px 20px;
             position:absolute;
             top:0;
             left:0;
             width:100%;
             height: 14em;
             background:rgba(0,0,0,0.7);
             opacity: 0;
             text-align:center;
             color: #39ffac;

         }
        .texts{
            line-height:30px;
            color: #fff;
            font-size: 22px;
            font-weight:500;
        }
         .text a{
             line-height:35px;
             color: #adfbcb;
             font-size: 18px;
             font-weight:500;
         }
         .commodityImgBox:hover .mask {
             opacity: 1;
         }
    </style>
</head>
<body>
<div class="content">
    <div class="page__bd">
        <div class="commodityImgBox">
            <img src="{$info.img}" alt="商品图片" class="commodityImg">
            <div class="mask">
                <div class="texts">该商品仅能购买{$info.homebuy}次</div>
                <div class="text">
                    <a href="{:url('cardusernu/getcardlistnu',array('mid'=>$info['mid']))}">查看已购买卡券
                    </a></div>
            </div>
        </div>
        <div class="mtop10 commodityIntroBox">
            <span class="color1 c-inlineblock c-aligh-left goodsjianjie">{$info.goodsjianjie}</span>
        </div>
        <div class="mtop5 color6 commodityUnivalenceBox">

            <span class="fsize10" style="font-size:12px;">¥</span>
            <span class="commodityUnivalence price">{$info['price']}</span>

        </div>
        <div class="mtop5 color6 commodityUnivalenceBox">

            <span class="fsize10">剩余数量:{$info['num']-$info['get_num']}</span>
        </div>
        <div class="mtop5 color6 commodityUnivalenceBox">
            <span class="fsize10">每人限购:{$info.homebuy}次 </span>

        </div>
        <div class="pad20">
            <div class="c-line"></div>
        </div>
        <div class="commodityDescBox c-aligh-left">

            {$info.goodsinfo}
            <sqan class="jus"></sqan>
        </div>

            <div class="btn">
                <input type="hidden" name="get_card_id" id="id" value="{$user.id}">
                <input type="hidden" name="fid" id="num" value="{$info.num}">
                <input type="hidden" name="fid" id="get_num" value="{$info.get_num}">
                <input type="hidden" name="fid" id="fid" value="{$info.id}">
                <input type="hidden" name="openid" id="openid" value="{$user.openid}">
                {eq name="$info['status']" value="1"}
                    {eq name=":filterpaycard($info['starttime'],$info['endtime'])" value="0"}
                        {eq name=":getpaysum($user['openid'],$info['id'])" value="0"}
                            {eq name="$info['stocks']" value="0"}
                                <button class="weui-btn weui-btn_default" id="weui-btn_default" style="background: #eee;">已售完</button>
                            {else/}
                                <button class="weui-btn weui-btn_primary " id="weui-btn_primary">支付{$info['price']}元</button>
                                <button class="weui-btn weui-btn_default" id="weui-btn_default" style="display:none;background: #eee;">支付{$info['price']}元</button>
                            {/eq}

                            {else/}
                     <a class="weui-btn weui-btn_default" id="weui-btn_default" href="{:url('cardusernu/getcardlistnu',array('mid'=>$info['mid']))}" style="background: #eee;">您已经购买，请点击查看</a>

                        {/eq}
                    {else/}
                        <button class="weui-btn weui-btn_default" id="weui-btn_default" style="background: #eee;">不在活动时间</button>
                    {/eq}
                {else/}
                    <button class="weui-btn weui-btn_default" id="weui-btn_default" style="background: #eee;">该商品已下架</button>
                {/eq}
            </div>

    </div>

</div>

<!----->
<div id="dialogt">
    <div class="js_dialog" id="iosDialog3" style="opacity: 1; display: none; z-index: 999;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                <div class="bgfff chakan" >
                    <p class="ku"></p>
                </div>
            </div>
            <div class="weui-dialog__ft">

                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
            </div>
        </div>
    </div>
</div>

</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <script type="text/javascript" id="tpl_dialog">
        $(function(){


            $('#dialogt').on('click', '.weui-dialog__btn', function(){
                $(this).parents('.js_dialog').fadeOut(200);
            });
            $(".commodityImgBox").mouseover(function(){
                $(".commodityImgBox .mask").show();
            })
            $(".commodityImgBox").mouseout(function(){
                $(".commodityImgBox .mask").hide();
            })
        });
</script>
<script>
    $(function(){

        var get_num=parseInt($('#get_num').val());
        var num=parseInt($('#num').val());
        //console.log(num == get_num);
        if(num == get_num){
            $("#weui-btn_primary").attr("style","display:none");
            $("#weui-btn_default").attr("style","display:block");

        }
    });
</script>
<script type="text/javascript">
    $(".weui-btn_primary").click(function () {
        var fid = $('#fid').val();
        var openid = $('#openid').val();
        var get_card_id=$('#id').val();
        var get_num=parseInt($('#get_num').val());
        var num=parseInt($('#num').val());


        if(num>get_num){

     //console.log(num>get_num);
        $.ajax({
            url: "{:url('cardshopnu/addorder')}",
            type: 'post',
            dataType: 'json',
            data: {
                id: fid,
                openid: openid,
                get_card_id:get_card_id
            },

            success: function (data) {
                console.log(11,data);


                // return;
                if(data.code==0){
                    var url=data.data.url;
                    window.location.replace(url);
                    return;
                }
                if(data.code=='9003'){
                    alert(data.message);
                    return;
                }

            }
        })
        }else{
            console.log(num>get_num);
            $("#weui-btn_primary").attr("style","display:none");
            $("#weui-btn_default").attr("style","display:block");
            $(".ku").html("该商品没有库存！");
            $("#iosDialog3").fadeIn(200);
        }
    })



</script>
</html>
